<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header-footer.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/cart.css">
</head>

<body>
    <header>
        <div class="mini-header w">
            <div class="logo-cart">
                <h1><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></h1>
                <h2>我的购物车</h2>
                <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
            </div>
            <div class="login-reg">
                <a href="../html/Xiaomi_person.html" class="user-id"></a>
                <span>|</span>
                <a class="exit">退出帐号</a>
            </div>
        </div>
    </header>

    <div class="mi-cart">
        <div class="cart-main w">
            <div class="goods-list">
                <div class="goods-list-title">
                    <div class="col col-check">
                        <input type="checkbox" class="checkAll"><span>全选</span>
                    </div>
                    <div class="col col-img"></div>
                    <div class="col col-name">商品名称</div>
                    <div class="col col-price">价格</div>
                    <div class="col col-num">数量</div>
                    <div class="col col-total">小计</div>
                    <div class="col col-action">操作</div>
                </div>

                <div class="goods-list-content">
                    <!-- <div class="goods-list-line">
                        <div class="col col-check">
                            <input type="checkbox"><span></span>
                        </div>
                        <div class="col col-img"><img src="" alt=""></div>
                        <div class="col col-name">商品名称</div>
                        <div class="col col-price">价格</div>
                        <div class="col col-num">
                            <h5>
                                <i class="num-del">-</i>
                                <input type="text" value="1" class="name-num">
                                <i class="num-add">+</i>
                            </h5>
                        </div>
                        <div class="col col-total">小计</div>
                        <div class="col col-action"><span>X</span></div>
                    </div> -->

                </div>

                <div class="goods-list-footer">
                    <div class="list-footer-left">
                        <p><a href="../html/Xiaomi_list.html">继续购物</a></p>
                        <em>|</em>
                        <h5><span>已选择</span><i class="aggregate">0</i><span>件</span></h5>
                    </div>
                    <div class="list-footer-rigth">
                        <h4><span>合计:</span><strong class="total-prices">0</strong><span>元</span></h4>
                        <button class="settle-btn">去结算</button>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="empty-cart">
        <div class="empty-cart-top w">
            <h2>您的购物车还是空的！</h2>
            <a href="../html/Xiaomi_list.html">去购物</a>
        </div>
    </div>




    <div class="footer">
        <div class="footer-container w">
            <ul class="footer-service">
                <li>
                    <a href="">
                        <i class="iconfont icon-weixiubanshou"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-7tiantuihuanhuo"></i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-tian"></i>
                        <span>15天免费换货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-liwuhuodong"></i>
                        <span>满69元包邮</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-didian"></i>
                        <span>520余家售后网点</span>
                    </a>
                </li>
            </ul>

            <div class="footerlinks">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店/专区</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                    <dd><a href="">企业社会责任</a></dd>
                    <dd><a href="">廉洁举报</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官方微信</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">公益基金会</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd><a href="">F码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
                <div class="col-contact">
                    <h3>400-100-5678</h3>
                    <p>8:00-18:00(仅收市话费)</p>
                    <a class="col-contact-service" href="">
                        <em class="iconfont icon-liuyan"></em>
                        <span>人工服务</span>
                    </a>
                    <h5><span>关注小米:</span>
                        <a href=""><i class="iconfont icon-xinlang"></i></a>
                        <a href=""><i class="iconfont icon-weixin"></i></a>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <div class="into">
        <div class="into-container w">
            <div class="into-logo">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
            </div>
            <div class="into-text">
                <h5>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 |
                    问题反馈 | Select Location</h5>
                <h5>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</h5>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
                <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <div class="into-links">
                    <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                    <img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
                    <img src="https://xyt.xinchacha.com/img/icon/icon3.png" alt="">
                    <img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1e68ce1fd7b9088931ef06942f02c99d.png"
                        alt="">
                </div>
            </div>

        </div>
        <div class="slogan w">让全球每个人都能享受科技带来的美好生活</div>
    </div>





</body>

<script src="../js/jq.js"></script>
<script src="../js/promise_ajax.js"></script>

<script>
    const oUesrId = document.querySelector('.user-id');
    const oExit = document.querySelector('.exit');
    // console.log(oExit);
    // let login_res = localStorage.getItem('xiaomi_xiaomi_');

    const userphone = localStorage.getItem('xiaomi_xiaomi_');
    if (userphone) {
        oUesrId.innerHTML = userphone;
    }
    else {
        const url = location;
        location.href = 'Xiaomi_login.html?accURL=' + url;
    }



    //退出
    oExit.onclick = function () {

        location.href = './Xiaomi_index.html';
        localStorage.removeItem('xiaomi_xiaomi_');
    }




    const oCartBox = document.querySelector('.mi-cart');
    // console.log(oCartBox);
    const oGoodsListS = document.querySelector('.goods-list-content');

    const oAgg = document.querySelector('.aggregate');//总数
    const oTp = document.querySelector('.total-prices');//总价
    const oSeBtn = document.querySelector('.settle-btn');//结算按钮


    // console.log(userphone)
    $('.mi-cart').hide();
    $('.empty-cart').show();

    if (userphone) {
        cart_list({ userphone }).then(res => {
            const { status, msg, list } = res;
            // console.log(list);
            if (status) {
                $('.mi-cart').show();
                $('.empty-cart').hide();

                let html = '';
                list.forEach(v => {
                    const {
                        cart_id,
                        goods_img,
                        goods_price,
                        goods_title,
                        goods_des,
                        goods_id,
                        num
                    } = v;

                    let imgArr = goods_img.split(',');


                    html += `
                    <div class="goods-list-line" data_id="${cart_id}" goods_id="${goods_id}">
                        <div class="col col-check">
                            <input type="checkbox" class="checkone"><span></span>
                        </div>
                        <div class="col col-img"><img src="${imgArr[0]}" alt=""></div>
                        <div class="col col-name">${goods_title}</div>
                        <div class="col col-price">${goods_price}</div>
                        <div class="col col-num">
                            <h5>
                                <button class="num-del">-</button>
                                <input type="text" value="${num}" class="name-num">
                                <button class="num-add">+</button>
                            </h5>
                        </div>
                        <div class="col col-total">${goods_price * num}</div>
                        <div class="col col-action"><span onclick="del(${cart_id},this)">X</span></div>
                    </div>`

                })
                oGoodsListS.innerHTML = html;

                //全选
                $('.checkAll').on('click', function () {
                    const check = $(this).prop('checked');
                    // console.log(check);
                    $('.checkone').prop('checked', check);
                    // $('.settle-btn').css("background-color", "#ff6700");
                    // if ($(this).prop('checked') === false) {
                    //     $('.settle-btn').css("background-color", "#999");
                    // }
                    total();
                })

                // console.log($('.checkone').prop('checked'));
                //反选
                $('.checkone').on('click', function () {
                    //判断所有的单选都要选中
                    $('.checkone').each((i, v) => {
                        if (!$(v).prop('checked')) {
                            $('.checkAll').prop('checked', false);
                            return false;
                        }
                        $('.checkAll').prop('checked', true);

                    })


                    total();
                })

                //数量增加
                $('.num-add').on('click', function () {
                    let num = $(this).prev().val();
                    num++;
                    $(this).prev().val(num);

                    if (num > 1) {
                        $(this).prev().prev().attr("disabled", false)
                    }
                    const id = $(this).parents('.goods-list-line').attr('goods_id');
                    console.log(id);
                    add_cart({
                        userphone,
                        id,
                        num: 1,
                    }).then(res => {
                        total();
                        const xj = $(this).prev().val() * $(this).parents('.goods-list-line').find('.col-price').html();
                        $(this).parents('.goods-list-line').find('.col-total').html(xj);
                    })
                })


                //数量减少
                $('.num-del').on('click', function () {
                    let num = $(this).next().val();
                    if (num >= 2) {
                        num--;
                        $(this).next().val(num);

                        const id = $(this).parents('.goods-list-line').attr('goods_id');
                        // console.log(id);
                        add_cart({
                            userphone,
                            id,
                            num: -1,
                        }).then(res => {
                            total();
                            const xj = $(this).next().val() * $(this).parents('.goods-list-line').find('.col-price').html();
                            $(this).parents('.goods-list-line').find('.col-total').html(xj);
                        })
                    }
                    else if (num <= 1) {
                        $(this).attr("disabled", true);
                    }
                })

                //单删
                $('.col-action span').on('click', function () {

                    const id = $(this).parents('.goods-list-line').attr('data_id');
                    console.log(id);
                    cart_del({ id }).then(res => {
                        const { status, msg } = res;
                        console.log(res);
                        if (status) {
                            $(this).parents('.goods-list-line').remove();

                            //判断是否已经全部删除
                            if ($('.checkone').length === 0) {
                                //全部删除，隐藏购物车
                                $('.mi-cart').hide();
                                $('.empty-cart').show();
                            }
                            total();
                        }
                        else {
                            console.log(msg);
                        }
                    })


                })

            }
        })
    }
    function total() {
        let count = 0;
        let money = 0;

        $('.checkone').each((i, v) => {
            if ($(v).prop('checked')) {
                count += $(v).parents('.goods-list-line').find('.name-num').val() * 1;
                money += $(v).parents('.goods-list-line').find('.col-total').html() * 1;
            }
        })
        $('.aggregate').html(count);
        $('.total-prices').html(money);
    }



    // //结算页//吸底部
    // const oPb = document.querySelector('.goods-list-footer');
    // // 拿到导航栏距离顶部的距离
    // const oTop = oPb.offsetTop;

    // document.body.onscroll = function () {
    //     // 拿到滚动的距离
    //     const scrollTop = document.documentElement.scrollTop;
    //     console.log(scrollTop);

    //     if (scrollTop >= oTop) {
    //         oPb.classList.add('active');
    //     }
    //     else {
    //         oPb.classList.remove('active');
    //     }
    // }




</script>

</html>